<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fireworks</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="fireworks"></canvas>
    
    <div class="controls">
        <div class="frequency-control">
            <label for="frequency-slider">烟花频率</label>
            <input type="range" id="frequency-slider" min="100" max="2000" value="700" step="100">
            <span id="frequency-value">中等</span>
        </div>

        <div class="text-control">
            <h3>自定义文字</h3>
            <div class="input-group">
                <label for="custom-text">文字内容</label>
                <input type="text" id="custom-text" placeholder="输入文字" maxlength="20">
            </div>
            
            <div class="input-group">
                <label for="render-mode">渲染模式</label>
                <select id="render-mode">
                    <option value="fireworks">烟花效果</option>
                    <option value="traditional">传统效果</option>
                </select>
            </div>

            <div class="input-group" id="fireworks-options">
                <label for="particle-density">粒子密度</label>
                <input type="range" id="particle-density" min="1" max="10" value="5" step="1">
                <span id="density-value">中等</span>
            </div>

            <div class="input-group" id="traditional-options" style="display: none;">
                <label for="text-color">文字颜色</label>
                <input type="color" id="text-color" value="#FFFFFF">
                <label for="text-size">文字大小</label>
                <input type="range" id="text-size" min="20" max="100" value="50" step="5">
                <span id="size-value">50px</span>
            </div>

            <button id="show-text-btn">显示文字</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>
